<template>
  <canvas
    ref="$canvas"
    class="ruler"
    @click="handleClick"
    @mouseenter="handleEnter"
    @mousemove="handleMove"
    @mouseleave="handleLeave"
  />
</template>
<script>
import { drawHorizontalRuler, drawVerticalRuler } from "./utils";
const getValueByOffset = (offset, start, scale) =>
  Math.round(start + offset / scale);
export default {
  name: "CanvasRuler",
  props: {
    vertical: Boolean,
    start: Number,
    scale: Number,
    width: Number,
    height: Number,
    canvasConfigs: Object,
    selectStart: Number,
    selectLength: Number
  },
  data() {
    return {
      $canvas: {},
      canvasContext: {}
    };
  },
  watch: {
    start() {
      this.drawRuler();
    },
    width(val) {
      this.updateCanvasContext();
      this.drawRuler();
    },
    height(val) {
      this.updateCanvasContext();
      this.drawRuler();
    }
  },
  mounted() {
    this.initCanvasRef();
    this.updateCanvasContext();
    this.drawRuler();
  },
  methods: {
    initCanvasRef() {
      this.canvasContext =
        this.$refs.$canvas && this.$refs.$canvas.getContext("2d");
    },
    updateCanvasContext() {
      const { ratio } = this.canvasConfigs;

      // 比例宽高
      this.$refs.$canvas = this.$refs.$canvas;
      this.$refs.$canvas.width = this.width * ratio;
      this.$refs.$canvas.height = this.height * ratio;

      const ctx = this.$refs.$canvas.getContext("2d");
      ctx.font = `${12 * ratio}px -apple-system, 
                "Helvetica Neue", ".SFNSText-Regular", 
                "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", 
                "Microsoft YaHei", "WenQuanYi Zen Hei", sans-serif`;
      ctx.lineWidth = 1;
      ctx.textBaseline = "middle";
    },
    drawRuler() {
      const options = {
        scale: this.scale,
        width: this.width,
        height: this.height,
        canvasConfigs: this.canvasConfigs
      };

      if (this.vertical) {
        drawVerticalRuler(
          this.canvasContext,
          this.start,
          { y: this.selectStart, height: this.selectLength },
          options
        );
      } else {
        drawHorizontalRuler(
          this.canvasContext,
          this.start,
          { x: this.selectStart, width: this.selectLength },
          options
        );
      }
    },
    handleClick(e) {
      const offset = this.vertical ? e.offsetY : e.offsetX;
      const value = getValueByOffset(offset, this.start, this.scale);
      this.$emit("onAddLine", value);
    },
    handleEnter(e) {
      const offset = this.vertical ? e.offsetY : e.offsetX;
      const value = getValueByOffset(offset, this.start, this.scale);
      this.$emit("onIndicatorShow", value);
    },
    handleMove(e) {
      const offset = this.vertical ? e.offsetY : e.offsetX;
      const value = getValueByOffset(offset, this.start, this.scale);
      this.$emit("onIndicatorMove", value);
    },
    handleLeave() {
      this.$emit("onIndicatorHide");
    }
  }
};
</script>
